<template>
  <div class="d-item">
    <el-checkbox v-model="selected" label="" @change="handleSelect" />
    <div class="l-item">
      <div class="l-name first-name"
        >{{ dataInfo.name || dataInfo.id
        }}<el-tag type="info">{{ dataInfo.type === '1' ? '数据采集' : '数据源探测' }}</el-tag></div
      >
      <div class="l-label">IP地址：{{ dataInfo.ip || '--' }}</div>
    </div>
    <div class="l-item" style="margin: 0 60px 0 30px">
      <div class="l-name first-name">状态</div>
      <div class="l-label status">{{ dataInfo.status == '1' ? '在线' : '离线' }}</div>
    </div>
    <!-- <div class="l-item">
      <div class="l-name first-name">归属机构</div>
      <div class="l-label">{{ dataInfo.dept || '--' }}</div>
    </div> -->
    <div class="l-item">
      <div class="l-name first-name">CPU利用率/负债率</div>
      <div class="l-label"
        >{{
          dataInfo?.cpu?.utilizationRate ? Number(dataInfo.cpu.utilizationRate).toFixed(2) : '--'
        }}%/{{
          dataInfo?.cpu?.loadFactor ? Number(dataInfo.cpu.loadFactor).toFixed(2) : '--'
        }}%</div
      >
    </div>
    <div class="l-item">
      <div class="l-name first-name">内存使用量/可用量</div>
      <div class="l-label"
        >{{ dataInfo?.disk?.usage ? Number(dataInfo.disk.usage).toFixed(2) : '--' }}G/{{
          dataInfo?.mem?.memMax ? Number(dataInfo.mem.memMax).toFixed(2) : '--'
        }}G</div
      >
    </div>
    <div class="l-item">
      <div class="l-name first-name">磁盘占用率</div>
      <div class="l-label"
        >{{ dataInfo?.disk?.usage ? Number(dataInfo.disk.usage).toFixed(2) : '--' }}%</div
      >
    </div>
    <div class="l-item action">
      <span @click="openChart" v-hasPermi="['system:device:detail']">查看</span>
      <span class="divider" v-hasPermi="['system:device:detail']"></span>
      <span @click="handleRestart" v-hasPermi="['system:device:restart']">重启</span>
      <span class="divider" v-hasPermi="['system:device:restart']"></span>
      <span style="color: #f56c6c" @click="handleStop" v-hasPermi="['system:device:stop']"
        >停止</span
      >
      <span class="divider" v-hasPermi="['system:device:edit']"></span>
      <span @click="handleEdit" v-hasPermi="['system:device:edit']">编辑</span>
    </div>
    <ChartDialog ref="chartRef" />
  </div>
</template>

<script setup lang="ts">
import ChartDialog from '../ChartDialog.vue'
import { ArrowDown } from '@element-plus/icons-vue'
import * as DeviceApi from '@/api/device'
const message = useMessage() // 消息弹窗
const emit = defineEmits(['getList', 'editItem', 'getId'])
const { t } = useI18n() // 国际化
const props = defineProps({
  dataInfo: {
    type: Array,
    default: () => []
  }
})
const selected = ref(false)

const chartRef = ref()
const openChart = () => {
  chartRef.value.open(props.dataInfo?.id)
}

/**批量选中 */
const handleSelect = (val) => {
  emit('getId', props.dataInfo?.id)
}

/** 删除按钮操作 */
const handleDelete = async () => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await DeviceApi.deviceDelete({ idList: [props.dataInfo?.id] })
    message.success(t('common.delSuccess'))
    // 刷新列表
    emit('getList')
  } catch {}
}

// 编辑
const handleEdit = () => {
  emit('editItem', props.dataInfo)
}
const handleRestart = async () => {
  try {
    // 删除的二次确认
    await message.confirm('确定要重启设备吗')
    // 发起删除
    await DeviceApi.deviceRestart(props.dataInfo?.id)
    message.success('重启成功')
    // 刷新列表
    emit('getList')
  } catch {}
}
const handleStop = async () => {
  try {
    // 删除的二次确认
    await message.confirm('确定要停止设备吗')
    // 发起删除
    await DeviceApi.deviceStop(props.dataInfo?.id)
    message.success('停止成功')
    // 刷新列表
    emit('getList')
  } catch {}
}
</script>

<style lang="scss" scoped>
.d-item {
  height: 110px;
  border: 1px solid #eee;
  padding: 25px 15px;
  box-sizing: border-box;
  display: flex;
  color: #555;
  font-size: 16px;
  margin-top: 20px;
  :deep(.el-checkbox) {
    height: 22px;
    margin-right: 20px;
  }
}
.l-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
  margin-right: 35px;
  flex-grow: 1;

  &:last-of-type {
    margin-right: 0px;
  }
  .l-label {
    font-size: 15px;
  }
  .l-label.status {
    position: relative;
    padding-left: 15px;
    &::before {
      content: '';
      position: absolute;
      width: 8px;
      height: 8px;
      background-color: green;
      left: 0;
      top: calc(50% - 4px);
      border-radius: 4px;
    }
  }
  &.action {
    display: flex;
    flex-direction: row;
    color: #409eff;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    span {
      cursor: pointer;
    }
    .divider {
      height: 15px;
      width: 1px;
      background-color: #c1c1c1;
      margin: 0 10px;
    }
  }
}
.l-name {
  font-weight: bold;
  color: #555;
  &.first-name {
    display: flex;
    align-items: center;
  }
  :deep(.el-tag) {
    margin-left: 10px;
  }
}
.more-icon {
  display: flex;
  align-items: center;
}
.popover-btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px 0;
  span {
    cursor: pointer;
  }
}
</style>
